<script setup lang="ts">
import {useRouter} from "vue-router";
import {computed} from "vue";
import {useStore} from "@/stores";

// @ts-ignore
const menus = Object.values(import.meta.glob("../menu/*.vue", {eager: true, import: "default"})).sort((a, b) => a.index - b.index);

const router = useRouter();

const store = useStore();

const crumbs = computed(() => router.currentRoute.value.matched.filter(r => !!r.name));
</script>

<template>
  <el-container>
    <el-aside width="200px">
      <el-container style="background-color: #27294e; height: 100vh">
        <el-header height="108px" style="border-bottom: 2px solid #d7d7d7">Header</el-header>
        <el-main style="overflow-x: hidden; padding: 0">
          <el-menu style="width: 200px" background-color="#27294e" text-color="#fff" router>
            <component v-for="c in menus" :is="c" />
          </el-menu>
        </el-main>
      </el-container>
    </el-aside>
    <el-container>
      <el-header height="108px" style="padding-top: 40px; border-bottom: 2px solid #d7d7d7; display: flex">
        <el-breadcrumb separator=">" style="font-size: 20px; flex: 1">
          <el-breadcrumb-item v-for="c in crumbs" :key="c.path">{{c.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-if="store.user.info !== null">
          您好, {{store.user.info.username}}
          <el-button plain style="margin-left: 15px" type="danger" @click="() => { store.user.logout(); router.push('/login') }">退出登录</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>

</style>
